<template>
	<view>
		<!-- 地图显示 -->
		<view class="map-views">
			<map style="width: 100%; height: 100vh;" id="myMap" scale="16" :latitude="address.lat" :longitude="address.lng" :markers="covers" @markertap="markertap">
			</map>
		</view>

		<!-- 订单列表 -->
		<view class="order-list" 
			:style="{maxheight: listHeight + 'px'}"
			@touchstart.native.stop="touchStart"
			@touchmove.native.stop="touchMove"
			@touchend.native.stop="touchEnd"
			>
			
			<view class="drag-bar">
				<view class="drag-line"></view>
			</view>
			<scroll-view scroll-y class="scroll-box" :style="{height: listHeight + 'px'}">
				<userOrderList :orderList="orderList"></userOrderList>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import userOrderList from '../../components/user-order-list/user-order-list.vue'
	export default {
		components:{
			userOrderList
		},
		data() {
			return {
				address:{
					address: "",
					cityid: 0,
					cityname: "",
					citynames: "",
					citypath: "",
					lat: 39.909,
					lng: 116.39742,
					mobile: "",
					name: ""
				},
				covers: [
					// {
					// 	latitude: this.address.lat,
					// 	longitude: this.address.lng,
					// 	title: this.address.address,
					// 	width: 30,
					// 	height: 40
					// }
				],
				// 新增数据项
				listHeight: 500, // 初始高度
				startY: 0,
				startHeight: 0,
				maxHeight: 600, // 最大高度
				minHeight: 300,  // 最小高度
				list: [
					{
						"value": null,
						"name": "全部",
						"count": 0
					}, 
					{
						"value": 1,
						"name": "待接单",
						"count": 0
					}, 
					{
						"value": 2,
						"name": "已接单",
						"count": 0
					}, 
					{
						"value": 3,
						"name": "待上门",
						"count": 0
					}, 
					{
						"value": 4,
						"name": "待付款",
						"count": 0
					}, 
					{
						"value": 5,
						"name": "已取消",
						"count": 0
					}, 
					{
						"value": 6,
						"name": "已回收",
						"count": 0
					}, 
					// {
					// 	"value": 7,
					// 	"name": "待入库",
					// 	"count": 0
					// }, 
					// {
					// 	"value": 8,
					// 	"name": "已入库",
					// 	"count": 0
					// }
				],
				orderList: [],
				PageIndex: 1,
				PageSize: 20,
			}
		},
		onLoad(opt) {
			this.getOrderList(null,0)
		},
		methods: {
			// 页面数据
			getOrderList(idx, index, renew = false) {
				this.loadStatus = 'loading'
				if (renew) {
					this.PageIndex = 1
				}
			
				return this.$u.post('/User/Order/List', {
					"PageIndex": this.PageIndex,
					"PageSize": this.PageSize,
					"key": '',
					// "manageState": idx
					// "Order": [{column:'Sort', isdesc: true}, {column:'Id', isdesc: true}],
					// "assignmentState": 0,
					"userType": 2,
					"state": [0,1,2],
					// "manageState": 0
				}).then((res) => {
					if(idx == null){
						res.managestate.forEach((item)=>{
							this.list.forEach((cell)=>{
								if((item.value == cell.value) && (cell.value == 1 || cell.value == 2 || cell.value == 3 || cell.value == 4)){
									cell.count = item.count
								}
							})
						})
					}
					
					console.log('this.list',this.list)
					
					this.refreshing = false
					// 是否刷新列表
					if (renew) {
						this.orderList = res.rows
						this.loadStatus = "nomore"
					} else {
						if (res.rows.length > 0) {
							res.rows.forEach((item) => {
								this.orderList.push(item)
							})
							if (res.rows.length < this.PageSize) {
								this.loadStatus = "nomore"
							} else {
								this.loadStatus = "loadmore"
							}
						} else {
							this.loadStatus = "nomore"
						}
					}
					
					// 定位小哥位置，按距离排序订单
					console.log('小哥当前位置:',this.brotherTrip)
					let latitude = this.$store.state.brother.brotherTrip.latitude
					let longitude = this.$store.state.brother.brotherTrip.longitude
					
					// let latitude= 23.623159
					// let longitude= 113.042491
					
					// this.covers = []
					this.orderList.forEach((item,i) => {
						// 格式化状态显示
						item.managestateName = this.list.find((cell)=>cell.value == item.managestate).name
						
						// 距离计算公式
						var radweidu1 = this.Rad(latitude);
						var radweidu2 = this.Rad(item.address.lat);
						var a = radweidu1 - radweidu2;
						var b = this.Rad(longitude) - this.Rad(item.address.lng);
						// console.log(b);
						var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radweidu1) * Math.cos(radweidu2) * Math.pow(Math.sin(b / 2), 2)));
						// console.log(s);
						s = s * 6378.137;
						s = Math.round(s * 10000) / 10000;
						s = s.toFixed(1) //保留两位小数
						// console.log('经纬度计算的距离:' + s)
						item.distance = parseFloat(s)
						
						if(i == 0){
							this.address.lat = item.address.lat
							this.address.lng = item.address.lng
						}
							
						this.covers.push({
							latitude: item.address.lat,
							longitude: item.address.lng,
							title: item.address.address,
							width: 30,
							height: 40,
							id: item.id
						})
					})
					
					// 按距离排序
					if(index < 4){ //待接单、已接单、待上门、待付款按当前定位到客户地址距离排序
						this.orderList.sort(function(a, b) {
							if (a.distance > b.distance) {
								return 1;
							} else if (a.distance < b.distance) {
								return -1
							} else {
								return 0;
							}
						})
					}
					
					this.$forceUpdate()
					return res.rows
				}).catch(() => {
					this.refreshing = false
				})
			},
			// 计算距离函数
			Rad(d) {
				// console.log(d,'这里是D');
				//根据经纬度判断距离
				return d * Math.PI / 180.0;
			},
			touchStart(e) {
				this.startY = e.touches[0].clientY
				this.startHeight = this.listHeight
			},
			touchMove(e) {
				const currentY = e.touches[0].clientY
				const deltaY = this.startY - currentY // 上滑为正值
				
				// 计算新高度（限制在最小最大高度之间）
				let newHeight = this.startHeight + deltaY
				newHeight = Math.max(this.minHeight, Math.min(newHeight, this.maxHeight))
				
				this.listHeight = newHeight
			},
			touchEnd() {
				// 可选：松手后自动吸附到最近的高度阈值
				const threshold = (this.maxHeight - this.minHeight) / 3
				this.listHeight = this.listHeight > (this.minHeight + threshold) ? this.maxHeight : this.minHeight
			},
			markertap(item){
				console.log('markertap:',item)
				this.goMap(this.address)
			},
			// // 查看地图
			// goMap(data) {
			// 	uni.openLocation({
			// 		latitude: data.lat,
			// 		longitude: data.lng,
			// 		name: data.address,
			// 		// address: data.citynames,
			// 		success: function() {
			// 			console.log('success');
			// 		}
			// 	});
			// },
			// hidePhoneNumber(phoneNumber) {
			//     if (!phoneNumber || phoneNumber.length !== 11) {
			//       return phoneNumber; // 如果电话号码为空或长度不是11位，直接返回
			//     }
			//     return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.order-list {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx 20rpx 0 0;
		transition: height 0.2s ease; /* 添加过渡动画 */
		overflow: hidden;
	}

	.scroll-box {
		height: 100%;
		// padding: 20rpx;
	}

	.drag-bar {
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.drag-line {
		width: 60rpx;
		height: 6rpx;
		background: #ddd;
		border-radius: 4rpx;
	}
	
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		box-shadow: $u-color-border-shadow;
	
		.top {
			display: flex;
			justify-content: space-between;
	
			.left {
				display: flex;
				align-items: center;
	
				.store {
					margin: 0 10rpx;
					font-size: 28rpx;
				}
			}
	
			.right {
				color: $u-type-warning-dark;
			}
		}
	
		.msg-box {
			.u-flex {
				align-items: baseline;
			}
	
			.usertype {
				font-size: 32rpx;
				padding-top: 10rpx;
			}
	
			.address {
				color: $u-tips-color;
				padding-top: 10rpx;
			}
		}
	
		.timefrom {
			color: $u-tips-color;
		}
	
		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;
	
			.left {
				margin-right: 20rpx;
	
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
	
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
	
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
	
				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}
	
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
	
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
	
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
	
		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
	
			.total-price {
				font-size: 32rpx;
			}
		}
	
		.time {
			font-size: 24rpx;
			margin: 20rpx 0;
			line-height: 40rpx;
		}
	
		.bottom {
			display: flex;
			margin-top: 40rpx;
			// padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
	
			.btn {
				line-height: 80rpx;
				width: 160rpx;
				border-radius: 8rpx;
				border: 2rpx solid $u-border-color;
				font-size: 32rpx;
				text-align: center;
				color: $u-type-info-dark;
				margin-left: 10rpx;
				flex: 1;
			}
	
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
			
			.details{
				background-color: $u-type-primary;
				border-color: $u-type-primary;
				color: #ffffff;
			}
		}
		
		.more{
			display: flex;
			align-items: center;
			line-height: 32rpx;
			.cell{
				flex: 1;
				text-align: center;
			}
			.divider{
				border-left: 1px solid $u-border-color;
				height: 40rpx;
			}
		}
	}
</style>
